<script lang="ts" setup>
/**
 * Props
 * @name img地址 | 全路径https地址 | OSS服务器图片名称 | base64
 *
 * @oss 是否为OSS服务器名称
 * 默认 false
 *
 * @base64 是否为base64格式数据
 * 默认 false
 *
 * @size 图片大小 --rpx
 * 默认 60rpx
 *
 * @type 图片类型
 * 默认 svg
 *
 * @width 图片宽度 --rpx
 * 优先于 size
 *
 * @height 图片高度 --rpx
 * 优先于 size
 *
 * @overspread 图片撑满 !!!可能导致图片失真
 * 默认 false
 *
 * @styles 自定义样式
 *
 * Slot 内容区域
 *
 * image生成步骤
 * 1：电脑全局安装工具 阿里OSS
 * 2：登陆收稻账号
 * 3：选择 https://shoudaostatic.oss-cn-shanghai.aliyuncs.com/MEIDAO-ZHIKE
 * 4：将svg（可以上传其他格式图片，引用时注意切换type）上传至该目录
 */
import { autoBG, hasUnit } from '@U/common'
import { computed, watch, ref } from 'vue'

const props = defineProps({
  name: {
    type: String,
    required: true,
  },
  oss: {
    type: Boolean,
    required: false,
    default: false,
  },
  base64: {
    type: Boolean,
    required: false,
    default: false,
  },
  size: {
    type: String,
    required: false,
    default: '320',
  },
  width: {
    type: String,
    required: false,
    default: '',
  },
  height: {
    type: String,
    required: false,
    default: '',
  },
  type: {
    type: String,
    required: false,
    default: 'svg',
  },
  overspread: {
    type: Boolean,
    required: false,
    default: false,
  },
  styles: {
    type: Object,
    required: false,
    default: () => ({}),
  },
})

const path = ref('')
const transferPath = (value: string) => {
  const realPath = /^http/.test(value)
          ? value
          : (
              props.oss
                  ? `${import.meta.env.VITE_SHOUDAO_OSS_URL}/${value}.${props?.type}`
                  : `${import.meta.env.VITE_SHOUDAO_IMG_URL}/${value}`
          )
  return realPath
}

const pathStyle = () => {
  if (props.base64) path.value = props.name
  else path.value = transferPath(props.name)
}
pathStyle()

// 撑满样式
const overspreadStyle = ref({
  background: `url('${props.base64 ? 'data:image/png;base64,' : ''}${path.value}') no-repeat center`,
  backgroundSize: '100% 100%',
})

watch(
  () => props.name,
  (newVal) => {
    if (props.base64) path.value = newVal
    else {
      path.value = transferPath(newVal)
      overspreadStyle.value.background = `url('${props.base64 ? 'data:image/png;base64,' : ''}${path.value}') no-repeat center`
    }
   },
)
// 图片样式
const imageStyle = computed(() => (props.overspread ? overspreadStyle.value : { background: autoBG(path.value, props.base64) }))
</script>

<template>
  <div
    :style="{
      width: hasUnit(width || size),
      height: hasUnit(height || size),
      ...imageStyle,
      ...styles,
    }"
  >
    <slot />
  </div>
</template>
